<h2>Thanh toán hóa đơn</h2>
<fieldset class="section" style="margin-top: 10px;">
    <legend>Danh sách khách hàng</legend>
    <input type="text" placeholder="Nhập tên hoặc số điện thoại" style="width: 400px;" onkeydown="ThanhToanHoaDon.TimKhachHang(this, event);" />
    <button type="button" onclick="ThanhToanHoaDon.HienThiTatCa();">Xem tất cả</button>

    <table class="table-views" style="margin-top: 10px;">
        <colgroup>
            <col style="width: 250px;">
            <col style="width: 100px;">
            <col>
        </colgroup>
        <thead>
        <tr>
            <td>Họ tên</td>
            <td>Số điện thoại</td>
            <td>Địa chỉ</td>
        </tr>
        </thead>
    </table>
    <div style="max-height: 400px; overflow-y: auto;">
        <table class="table-views">
            <colgroup>
                <col style="width: 250px;">
                <col style="width: 100px;">
                <col>
            </colgroup>
            <tbody>
                <tr class="default-row" style="display: none;" onclick="ThanhToanHoaDon.ChonKhachHang(this);">
                    <td class="congno" style="display: none;"></td>
                    <td class="hoten" style="padding-left: 5px;"></td>
                    <td class="sodienthoai" style="text-align: center;"></td>
                    <td class="diachi" style="padding-left: 5px;"></td>
                </tr>
            </tbody>
            <tbody id="container">

            </tbody>
            <tbody id="help-info">
                <tr>
                    <td colspan="3" style="text-align: center; font-size: 20px; font-weight: bold;">
                        Đang tải danh sách khách hàng...
                    </td>
                </tr>
            </tbody>
        </table>

    </div>
</fieldset>

<fieldset class="section" style="margin-top: 20px;">
    <legend>Thông tin khách hàng</legend>
    <table class="table-tools">
        <colgroup>
            <col style="width: 100px;">
            <col>
        </colgroup>
        <tr>
            <td colspan="2">
                <input type="hidden" id="txtMaKhachHang" value="-1" />
                <label for="cbKhachHangMoi"><input type="checkbox" id="cbKhachHangMoi" onchange="ThanhToanHoaDon.KhachHangMoi(this);">Khách hàng mới</label>
            </td>
        </tr>
        <tr>
            <td>Họ tên:</td>
            <td><input type="text" id="txtHoTen" disabled></td>
        </tr>
        <tr>
            <td>Số điện thoại:</td>
            <td><input type="text" id="txtSoDienThoai" disabled></td>
        </tr>
        <tr>
            <td>Địa chỉ:</td>
            <td><textarea  style="width: 350px; height: 100px; resize: none;"  id="txtDiaChi" disabled></textarea></td>
        </tr>
        <tr>
            <td>Còn nợ</td>
            <td><input type="text" id="txtCongNo" disabled value="0"> đồng</td>
        </tr>
    </table>
    <button id="thanhtoan-khachhang" onclick="ThanhToanHoaDon.LuuKhachHang(this);" disabled type="button"><span style="display: none;" class="fa-loading fa fa-spin fa-refresh"></span> Lưu khách hàng</button>

</fieldset>

<fieldset class="section" style="margin-top: 20px;">
    <legend>Thanh toán</legend>
    <input type="hidden" id="txtMaHoaDon" value="<?php echo $this->MaHoaDon; ?>">
    <table class="table-tools">
        <colgroup>
            <col style="width: 100px;">
            <col>
        </colgroup>
        <tr>
            <td>Số tiền phải trả: </td>
            <td>
                <input type="text" id="txtTongTien" readonly value="<?php echo $this->TongTien; ?>"> đồng
            </td>
        </tr>
        <tr>
            <td>Số tiền trả: </td>
            <td>
                <input type="text" id="txtTienTra" onchange="ThanhToanHoaDon.DoiTienTra(this);" value="<?php echo $this->TongTien; ?>"> đồng
            </td>
        </tr>
        <tr>
            <td>Còn lại: </td>
            <td>
                <input type="text" id="txtTienConLai" readonly value="0"> đồng
            </td>
        </tr>
        <tr>
            <td>Ghi chú:</td>
            <td><textarea  style="width: 350px; height: 100px; resize: none;"  id="txtGhiChu"></textarea></td>
        </tr>

    </table>
    <button id="thanhtoan-submit" type="button" onclick="ThanhToanHoaDon.ThanhToan(this);"><span style="display: none;" class="fa-loading fa fa-spin fa-refresh"></span> Thanh toán</button>
    <button id="thanhtoan-delete" data-text="<?php echo $this->MaHoaDon; ?>" class="button-red" style="float: right;" type="button" onclick="ThanhToanHoaDon.HuyHoaDon(this);"><span style="display: none;" class="fa-loading fa fa-spin fa-refresh"></span> Hủy hóa đơn</button>
</fieldset>

<script>
    ThanhToanHoaDon.DanhSachKhachHang();

    $('#txtTongTien').autoNumeric(
        'init', {aSep: ',', mDec: '0', vMax: '999999999999999'}
    );
    $('#txtTienTra').autoNumeric(
        'init', {aSep: ',', mDec: '0', vMax: '999999999999999'}
    );
    $('#txtTienConLai').autoNumeric(
        'init', {aSep: ',', mDec: '0', vMax: '999999999999999'}
    );

</script>